<template>
	<view class="content">
		<!-- 视图容器scroll-view swiper的用法 -->
		<!-- <scroll-view class="scroll-view" scroll-x="true">
			<view class="item item1">A</view>
			<view class="item item2">B</view>
			<view class="item item3">C</view>
		</scroll-view> -->
		<!-- swiper滑动视图容器的使用 -->
		<swiper class="swiper" indicator-dots autoplay="true" interval="2000" indicator-color="#fff"
			indicator-active-color="#f00">
			<swiper-item class="swiper-item index1" v-for="item in list">
				<image v-bind:src="'../../static/'+item.icon" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 美食分类标题 -->
		<uni-section title="美食类别" type="square">
			<!-- uni-grid宫格组件的使用 -->
			<swiper class="swiper-uni-grid" indicator-dots="true">
				<swiper-item>
					<uni-grid :column="4" :square="false" :highlight="true" @change="onChange">
						<uni-grid-item v-for="(item,index) in typelist" :index="index" :key="index">
							<view class="grid-item">
								<image v-bind:src="'../../static/'+item.icon"></image>
								<text>{{item.typename}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>

				<swiper-item>
					<uni-grid :column="4" :square="false" :highlight="true" @change="onChange">
						<uni-grid-item v-for="(item,index) in typelist" :index="index" :key="index">
							<view class="grid-item">
								<image v-bind:src="'../../static/'+item.icon"></image>
								<text>{{item.typename}}</text>
							</view>

						</uni-grid-item>
					</uni-grid>
				</swiper-item>
			</swiper>
		</uni-section>
		<uni-section title="附近商家" type="square"></uni-section>
		<!-- uni-list列表组件的使用 -->
		<scroll-view scroll-y="true">
			<uni-list>
				<uni-list-item title="浆一晨·肠粉鲜粥面小吃（才子汇店）" note="望城人气粥店第4名" thumb="../../static/images/img1.webp"
					thumb-size="lg" rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="栋哥手工粉面" note="面和汤都好" thumb="../../static/images/img2.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="三米粥铺(望城店)" note="望城人气粥店第2名" thumb="../../static/images/img3.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="万利隆包子铺店" note="长沙包子生煎复购第1名" thumb="../../static/images/img4.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="吉鲜丰卤粉店" note="便宜又实惠" thumb="../../static/images/img5.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="三米粥铺(望城店)" note="望城人气粥店第2名" thumb="../../static/images/img3.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="万利隆包子铺店" note="长沙包子生煎复购第1名" thumb="../../static/images/img4.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
				<uni-list-item title="吉鲜丰卤粉店" note="便宜又实惠" thumb="../../static/images/img5.webp" thumb-size="lg"
					rightText="美团专送">
				</uni-list-item>
			</uni-list>
		</scroll-view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 提供数组供页面进行循环遍历
				list: [{
						"id": 1,
						"name": "烤鸭",
						"type": "肉类",
						"icon": "/images/1.png",
						"description": "烤鸭是北京和南京的一道特色名菜,属于北京菜或金陵菜,该菜品以色泽红艳,肉质细嫩,味道醇厚,肥而不腻的特色,被誉为“天下美味”而驰名中外,其色泽略黄,柔软淡香,夹卷其他荤素食物食用,为宴席常用菜点,更是家常风味美食。",
						"price": 88.5
					},
					{
						"id": 2,
						"name": "回锅肉",
						"type": "肉类",
						"icon": "/images/2.png",
						"description": "回锅肉，是一种四川传统菜式中家常（味型）菜肴的代表菜肴之一，属于川菜系列。制作原料主要有猪后臀肉（二刀肉）、青椒、蒜苗等，口味独特，色泽红亮，肥而不腻。回锅肉起源四川农村地区。古代时期称作油爆锅，四川地区大部分家庭都会制作。所谓回锅，就是再次烹调的意思。",
						"price": 12.5
					},
					{
						"id": 3,
						"name": "茄子",
						"type": "蔬菜",
						"icon": "/images/3.png",
						"description": "油淋茄子以茄子、鸡蛋、肉末、粉丝等为食材制成的一道精美的平民美食。",
						"price": 20.5
					},
					{
						"id": 4,
						"name": "宫保鸡丁",
						"type": "肉类",
						"icon": "/images/4.png",
						"description": "宫保鸡丁选用鸡肉为主料，佐以花生米、辣椒等辅料烹制而成；红而不辣、辣而不猛、香辣味浓、肉质滑脆；其入口鲜辣，鸡肉的鲜嫩可以配合花生的香脆。",
						"price": 34.5
					}
				],
				//提供美食分类的数据源数组
				"typelist": [{
						"id": 1,
						"typename": "鱼类",
						"icon": "/images/fish.png"
					},
					{
						"id": 2,
						"typename": "肉类",
						"icon": "/images/meat.png"
					},
					{
						"id": 3,
						"typename": "菌菇类",
						"icon": "/images/mashroom.png"
					},
					{
						"id": 4,
						"typename": "豆制品",
						"icon": "/images/bean.png"
					},
					{
						"id": 5,
						"typename": "蔬菜",
						"icon": "/images/vegitable.png"
					},
					{
						"id": 6,
						"typename": "酒水",
						"icon": "/images/drink.png"
					},
					{
						"id": 7,
						"typename": "火锅",
						"icon": "/images/hotpot.png"
					},

					{
						"id": 8,
						"typename": "水果",
						"icon": "/images/fruit.png"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			onChange(e) {
				console.log(e.detail.index);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.scroll-view {
			width: 95%;
			height: 200rpx;
			border: #ccc solid 1rpx;
			/* 设置子元素不允许换行 */
			white-space: nowrap;

			.item {
				width: 100%;
				height: 100%;
				display: inline-block;
			}

			.item1 {
				background: red;
			}

			.item2 {
				background: green;
			}

			.item3 {
				background: blue;
			}
		}

		.swiper {
			width: 98%;
			height: 200rpx;
			margin-top: 20rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.swiper-uni-grid {
			width: 100%;
			height: 280rpx;

			.uni-grid-item {
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.grid-item {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

	}
</style>
